<template>
	<view class="generalization">
		<view class="nav flex_r_between">
			<view class="icon_back" @click="$native.backAction()">
				<u-icon name="arrow-left" size="40rpx"></u-icon>
			</view>
			<view class="nav_tab flex_center">
				<view @click="onTab(1)" :id="tab == 1 ? 'select' : ''">推广</view>
				<view @click="onTab(2)" :id="tab == 2 ? 'select' : ''">订单</view>
			</view>
			<view class="icon_back">
				<u-icon name="level" size="40rpx" color="#FFF"></u-icon>
			</view>
		</view>

		<view class="nav_box"></view>

		<view v-show="tab == 1">
			<!-- <view class="content_nav flex_center">
				<view @click="onType(1)" :id="info.type == 1 ? 'select' : ''">作品</view>
				<view @click="onType(5)" :id="info.type == 5 ? 'select' : ''">名片</view>
			</view> -->

			<view v-if="works_config.length">
				<works ref="works" v-show="info.type == 1" :user="user" :config="works_config"
					:provider_id="provider_id" :active_id="active_ids || '0'"></works>
			</view>

			<!-- <expert v-show="info.type == 5"></expert> -->
		</view>

		<order v-if="tab == 2" ref="order"></order>

	</view>
</template>

<script>
	import works from './works.vue';
	import expert from './expert.vue';
	import order from './order.vue';
	export default {
		components: {
			works,
			expert,
			order
		},
		data() {
			return {
				tab: 1,

				info: {
					// 类型:1=作品,2=房间,3=商品,4=名片
					type: 1,
				},

				works_config: [],
				product_config: [],

				provider_id: '0',
				active_ids: 0,

				user: {},

				platform: 'ios',

				shownav: true,
			}
		},
		methods: {
			onTab(e) {
				this.tab = e;
			},

			onType(e) {
				this.info.type = e;
			},

			getConfig(option) {
				this.$post('/popularize/getPopularizeConfig').then(res => {
					if (res.code == 0) {
						res.data.list.forEach(element => {
							if (element.id == 1) {
								this.works_config = element.child;
								if (this.works_config.length) {
									this.works_config_id =
										`${this.works_config[0].id}`;
									this.works_config_price =
										`${this.works_config[0].price}`;
								}

								if (uni.getSystemInfoSync().platform == 'ios') {
									this.works_config.splice(this.works_config.length -
										2, 2);
								}
							}

							if (element.id == 5) {
								this.product_config = element.child
							}
						})
						this.$nextTick(() => {
							this.getInit(option);
						})
					}
				})
			},

			// 更新 作品选中状态
			selectActiveIds(arr) {
				this.$refs.works.active_ids = arr;
			},

			getInit(option) {
				if (option.provider_id && option.provider_id != '0' && option.active_ids && option.active_ids != '0') {
					this.provider_id = option.provider_id;
					this.active_ids = option.active_ids;
					this.user = uni.getStorageSync('user');
					this.$refs.works.getActiveList(option.provider_id, option.active_ids);
					this.$refs.works.init();
					this.$refs.works.active_ids.push(Number(option.active_ids));
					this.$refs.works.is_mine = false;
				} else {
					if (option.token) {
						uni.setStorageSync('token', option.token);
						uni.setStorageSync('cid', option.cid);
						uni.setStorageSync('terminal', option.terminal);
					}
					this.$get('user/info').then(res => {
						this.user = res.data;
						uni.setStorageSync('user', res.data);
						this.provider_id = `${this.user.provider_id}`;
						this.active_ids = option.active_ids || '0';
						this.$refs.works.init();
						this.$refs.works.getActiveList(this.provider_id, this.active_ids);
						this.$refs.works.is_mine = true;
					});
				}
			}
		},

		onLoad(option) {
			if (option.token && option.cid && option.terminal) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			if (uni.getSystemInfoSync().platform == 'android') {
				this.platform = 'android';
			} else {
				this.platform = 'ios';
			}
			this.getConfig(option);
		},

		onReachBottom() {
			if (this.tab == 2) {
				this.$refs.order.reachBottom();
			}
		},


	}
</script>

<style scoped lang="less">
	.generalization {
		background: #FFFFFF;
		min-height: 100vh;
		padding: 0 32rpx 0;
	}

	.nav_box {
		padding: var(--paging-head-top) 0 0;
		height: calc(80rpx + var(--paging-head-top));
	}

	.nav {
		padding-top: var(--paging-head-top);
		padding-left: 16rpx;
		padding-right: 16rpx;
		width: 100vw;
		background: #FFF;
		height: 80rpx;
		position: fixed;
		box-sizing: content-box;
		top: 0;
		left: 0;
		z-index: 99;

		.icon_back {
			padding: 10rpx;
		}

		.nav_tab {
			width: 462rpx;
			height: 70rpx;
			background: #F0F0F0;
			border-radius: 32rpx;
			padding: 4rpx;

			view {
				flex: 1;
				text-align: center;
				border-radius: 30rpx;
				height: 56rpx;
				line-height: 56rpx;
			}

			#select {
				background: #FFFFFF;
			}
		}
	}

	.content_nav {
		view {
			width: 50%;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #131313;
			text-align: center;
		}

		#select {
			font-weight: 500;
			font-size: 28rpx;
			color: #FD2A53;
		}
	}
</style>